<template>
  <div id="ctlInfo-root" class="ctlInfo-root">

    <lark-drawer border title="采集信息" direction="right" width="400px" title-height="40px" ref="drawer">
      <div class="ctlInfo-body">
        <div class="ctlInfo-root-tabs" v-if="showType == 1">
          <!--          <btn-tabs @change="tabsClick" :items="tabsItems"></btn-tabs>-->
          <div>
            <el-button size="mini" icon="el-icon-d-arrow-left" type="success" @click="goCurrentR">返回当前采集</el-button>
          </div>
        </div>
        <div v-if="showType == 0 || showType == 3 || showType == 4">
          <div>
            <ctl-num ref="ctlNumRef" @ctlNumClick="ctlNumClick" @ctlUserClick="ctlUserClick"></ctl-num>
          </div>
        </div>

        <div class="ctlInfo-current-user" v-if="showType == 3">
          <div>
            <el-button size="mini" icon="el-icon-d-arrow-left" type="success" @click="goCurrentR">返回当前采集</el-button>
            <el-button size="mini" type="success" @click="cltRankClick">采集排行</el-button>
          </div>
          <el-scrollbar>
            <div class="current-user-row">
              <div style="flex: 0 0 5%" class="c-table-item"></div>
              <div style="flex: 0 0 30%;font-weight: bold">姓名</div>
              <div style="flex: 1 0  ;font-weight: bold">登录时间</div>
              <div style="flex: 1 0  ;font-weight: bold">轨迹回放</div>
            </div>
            <div @click="currentUserClick(item)" v-for="(item,index) in currentUser" :key="index"
                 class="current-user-row">
              <el-tooltip effect="light" :content="`${index + 1}`" placement="top">
                <div style="flex: 0 0 5%" class="c-table-item">{{ index + 1 }}</div>
              </el-tooltip>
              <el-tooltip effect="light" :content="`${item.nickName}`" placement="top">
                <div style="flex: 0 0 30%" class="c-table-item">{{ item.nickName }}</div>
              </el-tooltip>
              <el-tooltip effect="light" :content="`${item.appLastLoginTime}`" placement="top">
                <div style="flex: 1 0  " class="c-table-item">{{ item.appLastLoginTime }}</div>
              </el-tooltip>
              <el-tooltip effect="light" content="轨迹回放" placement="top">
                <div style="flex: 1 0; cursor: pointer" class="c-table-item" @click.stop="tackPlay(item.userId)">轨迹回放
                </div>
              </el-tooltip>
            </div>
          </el-scrollbar>
        </div>


        <div class="ctlInfo-current-user" v-if="showType == 4">
          <div>
            <el-button size="mini" icon="el-icon-d-arrow-left" type="success" @click="goCurrentR">返回当前采集</el-button>
          </div>
          <el-scrollbar>
            <div class="current-user-row">
              <div style="flex: 0 0 5%"></div>
              <div style="flex: 0 0 30%;font-weight: bold">姓名</div>
              <div style="flex: 1 0  ;font-weight: bold">登录时间</div>
              <!--              <div style="flex: 1 0  ;font-weight: bold">轨迹回放</div>-->
            </div>
            <div v-for="(item,index) in currentUser" :key="index" class="current-user-row">

              <el-tooltip effect="light" :content="`${index + 1}`" placement="top">
                <div style="flex: 0 0 5%" class="c-table-item">{{ index + 1 }}</div>
              </el-tooltip>
              <el-tooltip effect="light" :content="`${item.nickName}`" placement="top">
                <div style="flex: 0 0 30%" class="c-table-item">{{ item.nickName }}</div>
              </el-tooltip>
              <el-tooltip effect="light" :content="`${item.appLastLoginTime}`" placement="top">
                <div style="flex: 1 0  " class="c-table-item">{{ item.appLastLoginTime }}</div>
              </el-tooltip>
              <!--              <el-tooltip effect="light" content="轨迹回放" placement="top">-->
              <!--                <div style="flex: 1 0; cursor: pointer" class="c-table-item" @click.stop="tackPlay(item.userId)">轨迹回放-->
              <!--                </div>-->
              <!--              </el-tooltip>-->
            </div>
          </el-scrollbar>
        </div>

        <div class="ctlInfo-root-content" v-if="showType == 0">
          <el-scrollbar>
            <transition-group name="list-complete" tag="div">
              <info-detail :item="item" v-for="(item,index) in lunbo" :key="item.key"
                           class="ctl-r-tem"></info-detail>
            </transition-group>
          </el-scrollbar>
        </div>

        <div class="ctlInfo-root-content" v-if="showType == 1">
          <el-scrollbar>
            <info-detail :item="detailData">
              <!-- 附加其它详细信息 -->
              <div class="detail-more">
                <div class="detail-more-label">
                  编号:
                </div>
                <div class="detail-more-value">
                  {{ detailData.germplasmId }}
                </div>
                <div class="detail-more-label">
                  数量:
                </div>
                <div class="detail-more-value">
                  {{ detailData.count }}
                </div>
              </div>
              <div class="detail-more">
                <div class="detail-more-label">
                  经度:
                </div>
                <div class="detail-more-value">
                  {{ detailData.longitude }}
                </div>
                <div class="detail-more-label">
                  纬度:
                </div>
                <div class="detail-more-value">
                  {{ detailData.latitude }}
                </div>
              </div>
              <div class="detail-more">
                <div class="detail-more-label">
                  海拔:
                </div>
                <div class="detail-more-value">
                  {{ detailData.elecation }}
                </div>
                <div class="detail-more-label">
                  地形:
                </div>
                <div class="detail-more-value">
                  {{ detailData.topography }}
                </div>
              </div>
              <div class="detail-more">
                <div class="detail-more-label">
                  坡度:
                </div>
                <div class="detail-more-value">
                  {{ detailData.slopeDegree }}
                </div>
                <div class="detail-more-label">
                  坡向:
                </div>
                <div class="detail-more-value">
                  {{ detailData.slopeAcpect }}
                </div>
              </div>
              <div class="detail-more">
                <div class="detail-more-label">
                  坡位:
                </div>
                <div class="detail-more-value">
                  {{ detailData.slopePosition }}
                </div>
                <div class="detail-more-label">
                  颜色:
                </div>
                <div class="detail-more-value">
                  {{ detailData.color }}
                </div>
              </div>

              <div class="detail-more">
                <div class="detail-more-label">
                  生境:
                </div>
                <div class="detail-more-value">
                  {{ detailData.niche }}
                </div>
                <div class="detail-more-label">
                  伴生种:
                </div>
                <div class="detail-more-value">
                  {{ detailData.associateSpecies }}
                </div>
              </div>
              <div class="detail-more">
                <div class="detail-more-label">
                  备注:
                </div>
                <div class="detail-more-value">
                  {{ detailData.remark }}
                </div>
              </div>
            </info-detail>
          </el-scrollbar>
        </div>
      </div>
    </lark-drawer>


  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'
  import btnTabs from '@/components/ServiceComponents/btnTabs'

  import loading from '@/utils/loading'
  import { realResult, resultById, onlineUser } from '@/api/industry/ctl'
  import infoDetail from '@/views/industry/clt/ctlInfo/infoDetail'
  import { MathUtil } from 'lark-utils'
  import moment from 'moment'
  import ctlNum from '@/views/industry/clt/ctlInfo/ctlNum'

  export default {
    name: 'ctlInfo',
    components: {
      ctlNum,
      infoDetail,
      btnTabs
    },
    setup(props, content) {
      let data = reactive({
        showType: 0,
        tabsItems: [{ name: '当前采集' }, { name: '采集总览' }],
        lunbo: [],
        pageInfo: {
          total: 0,
          pageNum: 1,
          pageSize: 8
        },
        queryTime: null,
        querying: false,
        detailData: {},
        currentUser: []

      })

      const goCurrentR = () => {
        data.showType = 0
        data.detailData = {}
      }

      const queryById = async(id) => {
        let load = null
        try {
          load = loading(document.getElementById('ctlInfo-root'))
          data.showType = 1
          let response = await resultById(id)
          data.detailData = response.data[0]

        } finally {
          if (load) {
            load.close()
          }
        }

        console.log('queryById', id)
      }

      const loadListData = async() => {
        if (data.querying) {
          return
        }
        data.querying = true
        let load = null
        try {
          let requestData = {}
          if (data.lunbo.length > 0) {
            requestData.date = data.lunbo[0].createTime

          } else {
            requestData.date = null
            load = loading(document.getElementById('ctlInfo-root'))
          }
          let response = await realResult(requestData)
          let re = [...response.data.map(r => {
            r.key = 'a' + MathUtil.guid()
            return r
          }), ...data.lunbo]
          if (re.length > 10) {
            re.splice(10, re.length - 10)
          }
          data.lunbo = re
          data.querying = false
        } finally {
          if (load) {
            load.close()
          }
        }
      }
      const cltRankClick = () => {
        content.emit('ctlUserClick')
      }
      const currentUserClick = (item) => {
        content.emit('currentUserClick', item)
      }

      const ctlNumClick = () => {
        content.emit('ctlNumClick')
        // data.showType = 3
      }
      const ctlUserClick = async() => {
        // content.emit('ctlUserClick')
        data.showType = 3
        let response = await onlineUser()
        data.currentUser = response.data
      }

      const tackPlay = userId => {
        content.emit('player', userId)
      }

      onMounted(async() => {
        await loadListData()
        setInterval(() => {
          loadListData()
        }, 30000)
      })

      return {
        ...toRefs(data),
        goCurrentR,
        queryById,
        ctlNumClick,
        ctlUserClick,
        currentUserClick,
        cltRankClick,
        tackPlay
      }
    }
  }
</script>

<style scoped lang="scss">
  .ctlInfo-root {
    .ctlInfo-body {
      height: 48vh;

      .ctlInfo-pagination {
        height: 35px;
      }

      .ctlInfo-root-tabs {
        margin-top: 1px;
        height: 19px;
      }

      .ctlInfo-current-user {
        height: calc(48vh - 60px - 26px);
        padding: 0px 10px;


        .current-user-row {
          margin: 0px 10px;
          text-align: center;
          display: flex;
          justify-content: space-evenly;
          padding: 0 20px;
          height: 40px;
          line-height: 40px;
          border-bottom-style: dashed;
          border-bottom-width: 1px;

          &:hover {
            border-bottom-style: solid;
            cursor: pointer;
          }

          .c-table-item {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

      }

      .ctlInfo-root-content {
        height: calc(48vh - 60px);
        padding: 10px 10px;

        .detail-more {
          width: 100%;
          display: flex;
          align-items: flex-end;
          padding-left: 20px;

          .detail-more-label {
            padding-left: 5px;
            flex: 0 0 60px;
            font-style: oblique;
          }

          .detail-more-value {
            flex: 1;
            border-bottom: 1px dashed #b8b8b8
          }
        }


        .list-complete-enter, .list-complete-leave-to
          /* .list-complete-leave-active for below version 2.1.8 */
        {
          opacity: 0;
          transform: translateY(30px);
        }

        .list-complete-leave-active {
          position: absolute;
        }

        .ctl-r-tem {
          transition: all 1s;
        }
      }
    }


  }
</style>
